import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView
} from 'react-native';

import PizzView from './PizzaTranslator'



export default class OtherPage extends Component {

    render() {
        return (
            /*<View style={{flex:1,flexDirection:'row',}}>

                <View style={styles.container}>

                    <View style={{height:100, width:100, backgroundColor: 'powderblue'}} />
                    <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
                    <View style={{width: 100, height: 100, backgroundColor: 'steelblue'}} />



                </View>

                <PizzView style={{flex:1,backgroundColor:'red'}}/>

            </View>*/

            <ScrollView>
                <Text style={{fontSize:20}}>Scroll me plz</Text>
                <Image source={require('../img/favicon.png')} />
                <Text style={{fontSize:20}}>If you like</Text>
                <Image source={require('../img/favicon.png')} />

                <Text style={{fontSize:20}}>Scrolling down</Text>
                <Image source={require('../img/favicon.png')} />
                <Text style={{fontSize:20}}>What's the best</Text>
                <Image source={require('../img/favicon.png')} />
                <Text style={{fontSize:20}}>Framework around?</Text>
                <Image source={require('../img/favicon.png')} />
                <Text style={{fontSize:20}}>React Native</Text>
            </ScrollView>


        );
    }
}





const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection:'column',//row column
        justifyContent:'center',//flex-start、center、flex-end、space-around以及space-between。

        alignItems:'stretch',//flex-start、center、flex-end以及stretch。
    },
    icon:{
        width:20,
        height:20
    }
});